<template>
  <div class="count">
    <!-- <h2>当前求和为： {{num}}</h2> -->
    <!-- <h3>公司:{{countStore.company}}</h3>
    <h3>地址:{{countStore.address}}</h3>
    <h2>当前求和为： {{countStore.sum}}</h2> -->
    <h3>公司:{{company}}</h3>
    <h3>地址:{{address}}</h3>
    <h2>当前求和为： {{sum}}</h2>
    <select v-model.number="selected">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="synthesis(1)">加</button>
    <button @click="synthesis(0)">减</button>
    <div class="box">

    </div>
  </div>
</template>
<script setup lang="ts" name="Count">
  import { ref } from 'vue'
  import { storeToRefs } from 'pinia';

  // 引入 store
  import { useCountStore } from '@/store/count'
  // 获取 store
  const countStore = useCountStore();

  const { sum, company, address } = storeToRefs(countStore)

  // 数据
  // let num = ref(0)
  let selected = ref(1)


  // 方法


  // 增加
  function add (sym) {
    // 方式 一 直接修改
    // countStore.sum < 10 ? countStore.sum += selected.value : console.log(`操作无效`)

    // 方式二 使用 pania 的 api  $patch({})
    // countStore.$patch({
    //   sum: 8,
    //   company: '新公司名',
    //   address: '新地址'
    // })

    // 方式三  用 actions
    countStore.changeNum(selected.value, sym);

  }

  // 综合的方法
  function synthesis (sym) {
    countStore.changeNum(selected.value, sym);
  }
  // 减去
  function reduce () {
    // 方式 一
    countStore.sum > 0 ? countStore.sum -= selected.value : console.log(`操作无效`)
  }
</script>
<style scoped>
  .count {
    background: skyblue;
    padding: 10px;
    border-radius: 10px;
    /* box-shadow: 0 0 10px; */
    width: 900px;
    padding: 10px 30px;
    text-align: center;
    border-bottom: 20px white solid;
  }

  h2 {
    font-size: 30px;
  }

  select,
  button {
    font-size: 25px;
  }

  button {
    margin-left: 10px;
  }
</style>